<template>
    <div class="content">
        <div class="title-item">
            <span>废弃口罩收集</span>
        </div>
        <div class="chart-div">
            <div id="collect" class="chart-item-1"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>废弃口罩处置</span>
        </div>
        <div class="chart-div">
            <div id="management" class="chart-item-1"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>集中消杀防控</span>
        </div>
        <div class="chart-div">
            <div id="Kill" class="chart-item-1"></div>
            <div id="Kill2" class="chart-item-1"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>医疗废水处理</span>
        </div>
        <div class="chart-div">
            <div id="waste" class="chart-item-1"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>医疗废物处理</span>
        </div>
        <div class="chart-div">
            <div id="material" class="chart-item-1"></div>
            <div id="handle" class="chart-item-1"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>回收桶设置</span>
        </div>
        <div class="chart-div">
            <van-row>
                <van-col span="12"><div id="circular1" class="chart-item-2"></div></van-col>
                <van-col span="12"><div id="circular2" class="chart-item-2"></div></van-col>
            </van-row>
            <van-row>
                <van-col span="12"><div id="circular3" class="chart-item-2"></div></van-col>
                <van-col span="12"><div id="circular4" class="chart-item-2"></div></van-col>
            </van-row>
            <div class="divider"></div>
        </div>
<!--        <div class="recovery">-->
<!--            <div class="circular1"></div>-->
<!--            <div class="circular2"></div>-->
<!--            <div class="circular3"></div>-->
<!--            <div class="circular4"></div>-->
<!--        </div>-->
    </div>
</template>

<script>
import echarts from 'echarts'
import { Dialog } from 'vant'
import { hjzzzerooneList, hjzzzerotwoList, hjzzzerothreeList, hjzzsexList, hjzzoneList, sd43List, xsqkList } from '@/api/environment-renovation'
export default {
  name: 'index',
  data () {
    return {
      list: []
    }
  },
  methods: {
    collect (data1, data2) {
      let myChart = echarts.init(document.getElementById('collect'))
      // 指定图表的配置项和数据

      let option = {
        legend: {
          bottom: 10,
          left: 'center',
          data: ['单位(公斤)']
        },
        color: ['#FF912A'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '20',
          right: '20',
          top: '8%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: data1,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '单位(公斤)',
            type: 'bar',
            barWidth: '60%',
            data: data2
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    management (data1, data2) {
      let myChart = echarts.init(document.getElementById('management'))
      // 指定图表的配置项和数据

      let option = {
        legend: {
          bottom: 10,
          left: 'center',
          data: ['集中焚烧量', '收运量']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '15',
          right: '25',
          top: '8%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: data1
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '集中焚烧量',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: data2.fire_amount
          },
          {
            name: '收运量',
            type: 'line',
            stack: '总量',
            data: data2.tran_amount
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    Kill (data1, data2) {
      let myChart = echarts.init(document.getElementById('Kill'))
      // 指定图表的配置项和数据

      let option = {
        legend: {
          bottom: 10,
          left: 'center',
          data: ['总量']
        },
        tooltip: { trigger: 'item' },
        radar: [
          {
            indicator: data1,
            center: ['50%', '40%'],
            radius: 80,
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            name: {
              formatter: '{value}',
              textStyle: {
                color: '#72ACD1'
              }
            },
            splitArea: {
              areaStyle: {
                color: ['rgba(114, 172, 209, 0.2)',
                  'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
                  'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
                shadowColor: 'rgba(0, 0, 0, 0.3)',
                shadowBlur: 10
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
              }
            }
          }
        ],
        series: [
          {
            name: '雷达图',
            type: 'radar',
            emphasis: {
              lineStyle: {
                width: 4
              }
            },
            data: [
              {
                value: data2,
                name: '总量',
                areaStyle: {
                  color: 'rgba(255, 255, 255, 0.5)'
                }
              }
            ]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    Kill2 (data1, data2) {
      let myChart = echarts.init(document.getElementById('Kill2'))
      // 指定图表的配置项和数据

      let option = {
        legend: {
          bottom: 10,
          left: 'center',
          data: ['消杀量']
        },
        tooltip: { trigger: 'item' },
        radar: [
          {
            indicator: data1,
            center: ['50%', '50%'],
            radius: 80,
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            name: {
              formatter: '{value}',
              textStyle: {
                color: '#72ACD1'
              }
            },
            splitArea: {
              areaStyle: {
                color: ['rgba(114, 172, 209, 0.2)',
                  'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
                  'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
                shadowColor: 'rgba(0, 0, 0, 0.3)',
                shadowBlur: 10
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
              }
            }
          }
        ],
        series: [
          {
            name: '雷达图',
            type: 'radar',
            emphasis: {
              lineStyle: {
                width: 4
              }
            },
            data: [
              {
                value: data2,
                name: '消杀量',
                areaStyle: {
                  color: 'rgba(255, 255, 255, 0.5)'
                }
              }
            ]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    waste (data1, data2) {
      let myChart = echarts.init(document.getElementById('waste'))
      // 指定图表的配置项和数据

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['污水处理量', 'PH值']
        },
        grid: {
          left: '10',
          right: '10',
          top: '8%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: data1,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 2000,
            interval: 500,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            min: 0,
            max: 12,
            interval: 2,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '污水处理量',
            type: 'bar',
            data: data2.water_amount,
            color: '#37a2da'
          },
          {
            name: 'PH值',
            type: 'line',
            yAxisIndex: 1,
            data: data2.ph_num,
            color: '#9fe6b8'
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    material (data1, data2) {
      let myChart = echarts.init(document.getElementById('material'))
      // 指定图表的配置项和数据

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#ffc729'
            }
          }
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['处理量', '转移量']
        },
        grid: {
          left: '10',
          right: '10',
          top: '8%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: data1,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 30,
            interval: 10,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            min: 0,
            max: 30,
            interval: 10,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '处理量',
            type: 'bar',
            data: data2.move_num,
            color: '#32c5e9'
          },
          {
            name: '转移量',
            type: 'line',
            yAxisIndex: 1,
            data: data2.deal_num,
            color: '#ffdb5c'
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    handle (data1, data2) {
      let myChart = echarts.init(document.getElementById('handle'))
      // 指定图表的配置项和数据

      let option = {
        tooltip: { trigger: 'axis' },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['产生量', '处理量']
        },
        grid: {
          left: '10',
          right: '15',
          top: '8%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data1
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [
          {
            name: '产生量',
            type: 'line',
            data: data2.produce_num
          },
          {
            name: '处理量',
            type: 'line',
            data: data2.deal_num
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    circular1 (data) {
      let myChart = echarts.init(document.getElementById('circular1'))
      // 指定图表的配置项和数据

      let
        option = {
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} '
          },
          legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
            data: [data.type]
          },
          grid: {
            left: '10',
            right: '10',
            containLabel: true
          },
          series: [
            {
              label: {
                position: 'inner',
                formatter: ' {b} \n {c}  '
              },
              type: 'pie',
              radius: '60%',
              center: ['50%', '40%'],
              selectedMode: 'single',
              data: [
                { value: data.amount, name: data.type, itemStyle: { color: '#005eff' } }
              ]
            }
          ]
        }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    circular2 (data) {
      let myChart = echarts.init(document.getElementById('circular2'))
      // 指定图表的配置项和数据

      let
        option = {
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} '
          },
          legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
            data: [data.type]
          },
          series: [
            {
              label: {
                position: 'inner',
                formatter: ' {b} \n {c}  '
              },
              type: 'pie',
              radius: '60%',
              center: ['50%', '40%'],
              selectedMode: 'single',
              data: [
                { value: data.amount, name: data.type, itemStyle: { color: '#ff7d2d' } }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    circular3 (data) {
      let myChart = echarts.init(document.getElementById('circular3'))
      // 指定图表的配置项和数据

      let
        option = {
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} '
          },
          legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
            data: [data.type]
          },
          series: [
            {
              label: {
                position: 'inner',
                formatter: ' {b} \n {c}  '
              },
              type: 'pie',
              radius: '60%',
              center: ['50%', '40%'],
              selectedMode: 'single',
              data: [
                { value: data.amount, name: data.type, itemStyle: { color: '#fff367' } }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    circular4 (data) {
      let myChart = echarts.init(document.getElementById('circular4'))
      // 指定图表的配置项和数据

      let
        option = {
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} '
          },
          legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
            data: [data.type]
          },
          series: [
            {
              label: {
                position: 'inner',
                formatter: ' {b} \n {c}  '
              },
              type: 'pie',
              radius: '60%',
              center: ['50%', '40%'],
              selectedMode: 'single',
              data: [
                { value: data.amount, name: data.type, itemStyle: { color: '#4cffbf' } }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0
                  // shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    init () {
      hjzzzerooneList().then(({ data }) => {
        if (data.errcode === 0) {
          let list = data.data
          let data1 = []
          let data2 = []
          list.forEach(item => {
            data1.push(item.type)
            data2.push(item.amount)
          })
          this.collect(data1, data2)
        } else {
          Dialog.alert({
            message: data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      hjzzzerothreeList().then(({ data }) => {
        if (data.errcode === 0) {
          let list = data.data
          let data1 = []
          let data2 = { ph_num: [], water_amount: [] }
          list.forEach(item => {
            data1.push(item.hosp_name)
            data2.ph_num.push(item.ph_num)
            data2.water_amount.push(item.water_amount)
          })
          this.waste(data1, data2)
        } else {
          Dialog.alert({
            message: data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      hjzzzerotwoList().then(({ data }) => {
        if (data.errcode === 0) {
          let list = data.data
          let data1 = []
          let data2 = { move_num: [], deal_num: [] }
          list.forEach(item => {
            data1.push(item.md)
            data2.move_num.push(item.move_num)
            data2.deal_num.push(item.deal_num)
          })
          this.material(data1, data2)
        } else {
          Dialog.alert({
            message: data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      hjzzsexList().then(({ data }) => {
        if (data.errcode === 0) {
          let list = data.data
          this.circular1(list[0])
          this.circular2(list[1])
          this.circular3(list[2])
          this.circular4(list[3])
        } else {
          Dialog.alert({
            message: data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      hjzzoneList().then(({ data }) => {
        if (data.errcode === 0) {
          let list = data.data
          let data1 = []
          let data2 = { produce_num: [], deal_num: [] }
          list.forEach(item => {
            data1.push(item.md)
            data2.produce_num.push(item.produce_num)
            data2.deal_num.push(item.deal_num)
          })
          this.handle(data1, data2)
        } else {
          Dialog.alert({
            message: data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      sd43List().then(({ data }) => {
        if (data.errcode === 0) {
          let list = data.data
          let data1 = []
          let data2 = { fire_amount: [], tran_amount: [] }
          list.forEach(item => {
            data1.push(item.md)
            data2.fire_amount.push(item.fire_amount)
            data2.tran_amount.push(item.tran_amount)
          })
          this.management(data1, data2)
        } else {
          Dialog.alert({
            message: data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      xsqkList().then(({ data }) => {
        if (data.errcode === 0) {
          let list = data.data
          let data1 = []
          let data2 = []
          let data3 = []
          list.forEach(item => {
            data1.push({ text: item.object })
            data2.push(item.sum_amount)
            data3.push(item.kill_amount)
          })
          this.Kill(data1, data2)
          this.Kill2(data1, data3)
        } else {
          Dialog.alert({
            message: data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
    .content{
        background-color: #efefef;
    }
    .chart-item-1{
        width: 100%;
        height: 240px;
    }
    .chart-item-2{
        width: 100%;
        height: 120px;
    }
    .title-item{
        padding: 10px;
        font-size: 14px;
        color: #333333;
    }
    .title-item span{
        border-left: 5px solid #8b0000;
        padding-left: 5px;
    }
    .recovery{
        height: 200px;
        border: black 1px solid;
    }
    .circular1{
        height: 60px;
        width: 60px;
        border: black 1px solid;
        border-radius: 50%;
    }
    .circular2{
        height: 60px;
        width: 60px;
        border: black 1px solid;
        border-radius: 50%;
    }
    .circular3{
        height: 60px;
        width: 60px;
        border: black 1px solid;
        border-radius: 50%;
    }
    .circular4{
        height: 60px;
        width: 60px;
        border: black 1px solid;
        border-radius: 50%;
    }
    .chart-div{
        padding: 0 10px;
    }
    .chart-div .chart-item-2,.chart-div .chart-item-1,.chart-div .chart-item,.chart-div .table-item{
        background-color: #ffffff;
    }
    .divider{
        width: 100%;
        height: 5px;
        background-color: rgb(204, 204, 204);
        margin-top: 10px;
    }
    .chart-div .van-col--12{
        padding: 0;
    }
</style>
